前端生成二维码和条形码

2024-01-25 18:11| 来源: 网络整理| 查看: 265

二维码又称二维条码，常见的二维码为QR Code，QR全称Quick Response，是一种编码方式。它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。

条形码(barcode)是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符。常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成的平行线图案。条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等许多信息，因而在商品流通、图书管理、邮政管理、银行系统等许多领域都得到广泛的应用。

在前端程序中如何生成二维码(qrcode)和条形码（barcode）呢？，那就请往下看，本文介绍了如何使用VUE和小程序前端生成二维码和条形码。

微信小程序 - 生成二维码(qrcode)和条形码（barcode）

采用wxbarcode--微信小程序生成条码和二维码模块。

安装 $ npm install wxbarcode 使用方法 import wxbarcode from 'wxbarcode' wxbarcode.barcode('barcode', '1234567890123456789', 680, 200); wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420); 条形码

函数名：barcode

函数原型：barcode(id, code, width, height)

参数：

id: wxml文件中的 Canvas ID code: 用于生成条形码的字符串 width: 生成的条形码宽度，单位 rpx height: 生成的条形码高度，单位 rpx 二维码

函数名：qrcode

函数原型：qrcode(id, code, width, height)

参数：

id: wxml文件中的 Canvas ID code: 用于生成二维码的字符串 width: 生成的二维码宽度，单位 rpx height: 生成的二维码高度，单位 rpx 具体实例

utils文件下载地址，此步骤必须

pages/index/index.js

//index.js var wxbarcode = require("../../utils/index.js"); Page({ data: { code: "1234567890123456789", }, onLoad: function () { wxbarcode.barcode("barcode", "1234567890123456789", 680, 200); wxbarcode.qrcode("qrcode", "1234567890123456789", { codeSize: 420, color: "#ff0000", bgcolor: "#ffffff", }); }, });

pages/index/index.wxml

{{code}} VUE 生成二维码(qrcodejs)和条形码（barcode） VUE 生成二维码(qrcodejs）

QRCode.js 是用于制作 QRCode 的 javascript 库。 QRCode.js 支持跨浏览器与 HTML5 Canvas 和 DOM 中的表格标签。 QRCode.js 没有依赖项。

安装依赖 npm i qrcodejs2 --save 组件内使用 import QRCode from 'qrcodejs2' // 1、简单使用： const qrcode = new QRCode(qrcodeDiv, 'this is qrcode') // 2、复杂使用 const qrcode = new QRCode(qrcodeDiv, { text: 'this is qrcode', // 用于生成二维码的文本 width: 200, // 高度 height: 200, // 宽度 colorDark: '#000000', //前景色 colorLight: '#ffffff', //后景色 correctLevel: QRCode.CorrectLevel.H, //容错级别 QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H }) 完整实例 import QRCode from 'qrcodejs2'; // 引入 QRCode export default { name: "CdsQRCode2", data() { return { }; }, mounted() { this.getCode(); }, methods: { getCode() { new QRCode(this.$refs.qrCodeDiv, { text: 'this is qrcode', // 用于生成二维码的文本 width: 200, height: 200, colorDark: '#333', //二维码颜色 colorLight: '#fff', //二维码背景色 correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H }) }, } }; VUE 条形码（barcode）

JsBarcode 是一个用 JavaScript 编写的条形码生成器。它支持多种条形码格式，可在浏览器和 Node.js 中使用。当它用于 web 时它没有依赖性，但如果你喜欢它，它可以与 jQuery 一起使用。

安装依赖 npm install jsbarcode --save main.js中全局引入 import JsBarcode from 'jsbarcode' Vue.prototype.jsbarcode = JsBarcode 定义组件

'@/components/Barcode'

import JsBarcode from 'jsbarcode' export default { props: { JsBarcodeData: { type: Object, }, }, mounted() { this.$nextTick(() => { JsBarcode('.barcode', String(this.JsBarcodeData.text), { // format: "CODE39",//选择要使用的条形码类型 -- default: "auto" (CODE128) width:1,//设置条之间的宽度 height:40,//高度 displayValue:false ,//是否在条形码下方显示文字 // text:"456",//覆盖显示的文本 // fontOptions:"bold italic",//使文字加粗体或变斜体 // font:"fantasy",//设置文本的字体 // textAlign:"left",//设置文本的水平对齐方式 // textPosition:"top",//设置文本的垂直位置 // textMargin:5,//设置条形码和文本之间的间距 fontSize:15,//设置文本的大小 background: this.JsBarcodeData.background,,//设置条形码的背景 lineColor: this.JsBarcodeData.lineColor,//设置条和文本的颜色。 margin:0//设置条形码周围的空白边距 }); }) }, } .barcode-wrapper { display: flex; justify-content: center; width: 100%; height: 100%; } .barcode { max-width: 375px !important } 使用组件 import Barcode from '@/components/Barcode' export default { name: "barcode", components: { Barcode }, data() { return { JsBarcodeConfigData : { text: '12345678909876543210', // 条形码必须是字符串类型，否则会出现后面几位为数字的情况。 lineColor: "#333", //二维码颜色 background: "#fff", //二维码背景色 width: this.widthStyleObj, } } }, }

结果

条形码

参考文档：

https://www.cnblogs.com/zwh0910/p/16692073.html https://github.com/alsey/wxbarcode https://www.npmjs.com/package/wxbarcode/v/1.0.2 https://github.com/lindell/JsBarcode

【本文地址】

公司简介

联系我们